<div class="content">
    <div id="example_title">
        <h1>Column Sort</h1>
        By default column sorting is disabled. To enable set <span class="method">sortable</span> property of the column to true. <br>
        A user can sort by several columns at the same time by holding <span class="method">shift</span> key (also <span class="method">ctrl</span>
        or <span class="method">cmd</span> key on the mac).
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="grid" style="width: 800px; height: 350px;"></div>

<!--CODE-->
<script type="module">
import { w2grid } from '__W2UI_PATH__'

let grid = new w2grid({
    name: 'grid',
    box: '#grid',
    show: { lineNumbers: true },
    columns: [
        { field: 'lname', text: 'Last Name', size: '30%', sortable: true },
        { field: 'fname', text: 'First Name', size: '30%', sortable: true },
        { field: 'email', text: 'Email', size: '40%', sortable: true },
        { field: 'sdate', text: 'Start Date', size: '90px', sortable: true }
    ],
    records: [
        { recid: 1, fname: 'John', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '1/3/2012' },
        { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'motzart@gmail.com', sdate: '4/3/2012' },
        { recid: 3, fname: 'Jin', lname: 'Franson', email: 'franson@gmail.com', sdate: '2/3/2012' },
        { recid: 4, fname: 'Frank', lname: 'Ottie', email: 'ottie@gmail.com', sdate: '4/3/2012' },
        { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'ksilver@gmail.com', sdate: '5/3/2012' },
        { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'fgotya@gmail.com', sdate: '4/4/2012' },
        { recid: 7, fname: 'Dimas', lname: 'Welldo', email: 'dimas@gmail.com', sdate: '7/3/2012' },
        { recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'bahhtee@gmail.com', sdate: '4/3/2012' },
        { recid: 9, fname: 'Ottie', lname: 'Welldo', email: 'doe@gmail.com', sdate: '4/3/2012' },
        { recid: 10, fname: 'Thomas', lname: 'Bahh', email: 'jane@gmail.com', sdate: '9/4/2012' },
        { recid: 11, fname: 'Kolya', lname: 'Doe', email: 'follow@gmail.com', sdate: '4/3/2012' },
        { recid: 12, fname: 'Martha', lname: 'Motzart', email: 'joe@gmail.com', sdate: '4/3/2012' }
    ]
})
</script>
